<template>
  <div class="content-summary">
    <p class="title">
      今日数据概括
      <!-- <img style="height: 0.7em;margin-left: 0.3em;" src="../../../../assets/bigDataSourceImage/barTitleIcon.png"> -->
      <img class="title-icon iconOne" src="../../../../assets/bigDataSourceImage/titleIcon1.png"><img class="title-icon iconTwo" src="../../../../assets/bigDataSourceImage/titleIcon2.png"><img class="title-icon iconThree" src="../../../../assets/bigDataSourceImage/titleIcon3.png">
    </p>
    <div class="data-summary">
      <div class="row" v-for="(item,index) in summarys" @mouseover="mouseOver(index)" @mouseleave="mouseOverShow = 0">
        <div class="data-num" :class="{'data-num-style': (index+1000)==mouseOverShow}">
          <img class="data-num-icon" :src="item.iconUrl">
          <div class="data-num-content">
            <span class="data-num-content-num" :class="{'num-style': (index+1000)==mouseOverShow}">{{item.num}}</span>
            <p class="data-num-content-title" :class="{'title-style': (index+1000)==mouseOverShow}">{{item.title}}</p>
          </div>
        </div>
        <div class="compare" :class="{'data-num-style': (index+1000)==mouseOverShow}">
          <div class="yesterday">
            <p :class="{'title-style': (index+1000)==mouseOverShow}">较上日</p>
            <svg-icon icon-class="arrow-up"></svg-icon>
            <span>{{item.yesterdayNum}}</span>
          </div>
          <div class="last-week">
            <p :class="{'title-style': (index+1000)==mouseOverShow}">较上周同日</p>
            <svg-icon icon-class="arrow-down"></svg-icon>
            <span>{{item.lastWeekNum}}</span>
          </div>
        </div>
        <div class="area" :class="{'data-num-style': (index+1000)==mouseOverShow}">
          <span>全区域</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'content-summary',
    data() {
      return {
        mouseOverShow: 0,
        summarys: [
          {
            iconUrl: require('../../../../assets/bigDataSourceImage/parkingNum.png'),
            num: 9986,
            title: '泊车数（辆）',
            yesterdayNum: 213,
            lastWeekNum: 124
          },
          {
            iconUrl: require('../../../../assets/bigDataSourceImage/money.png'),
            num: 67825,
            title: '泊车收入（元）',
            yesterdayNum: 1054,
            lastWeekNum: 598
          },
          {
            iconUrl: require('../../../../assets/bigDataSourceImage/income.png'),
            num: 5.6,
            title: '平均收入（元）',
            yesterdayNum: 0.8,
            lastWeekNum: 0.2
          }
        ]
      }
    },
    mounted() {

    },
    methods: {
      mouseOver(index) {
        this.mouseOverShow = 1000 + index;
      }
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .content-summary {
    height: 100%;
  }
  .title {
    margin: 0;
    color: #fff;
    font-size: 1em;
  }
  .data-summary {
    border: 1px solid transparent;
    border-image-source: url('../../../../assets/bigDataSourceImage/box1.png');
    border-image-slice: 26 26 26 26;
    border-image-repeat: stretch;
    border-image-width: 26px;
    box-sizing: border-box;
    height: calc(100% - 1.6em);
    margin-top: 6px;
    /* padding: 1.7em 2.6em 0em 2.6em; */
    padding: 1.7em 1.6em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .row {
    height: 32%;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .data-num,
  .compare,
  .area {
    height: 100%;
    width: 55%;
    background-color: rgba(1, 68, 101, 0.3);
    display: inline-block;
    vertical-align: top;
    position: relative;
  }
  /* .area {
   position: relative;
  } */
  .area span {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
  }
  .compare {
    width: 40%;
    margin: 0 0.2em;
  }
  .compare div {
    display: inline-block;
    color: #fff;
    font-size: 1.2em;
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .yesterday {
    left: 15%;
  }
  .last-week {
    right: 15%;
  }
  .compare div p {
    font-family: Adobe Heiti Std R;
    font-size: 0.8em;
    color: #C6C6C6;
    margin-bottom: 0.5em;
  }
  .area {
    width: 4%;
    color: rgba(128, 130, 132, 1);
    text-align: center;
    /* display: flex; */
    padding-top: 0.4em;
  }
  .data-num-icon {
    height: 72%;
    margin-left: 1.6em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .data-num-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 6.4em;
    /* border: 1px solid red; */
    text-align: left;
  }
  .data-num-content-num {
    color: rgba(23, 102, 220, 1);
    font-size: 1.6em;
    font-family: Microsoft YaHei;
    font-weight: 500;
  }
  .data-num-content-title {
    color: rgba(198, 198, 198, 1);
    font-size: 1.2em;
    /* transform: scale(0.8); */
    margin-top: 0.4em;
  }
  .row:hover {
    cursor: pointer;
  }
  .data-num-style {
    background-color: #125d85;
  }
  .num-style {
    color: #fff;
  }
  .title-style {
    color: #ABD8EE !important;
  }
  .title-icon {
    height: 0.7em;
    margin-right: -3px;
  }
  .iconOne,
  .iconTwo,
  .iconThree {
    animation: enlarge 0.9s infinite;
  }
  .iconTwo {
    animation-delay: 0.3s;
  }
  .iconThree {
    animation-delay: 0.6s;
  }
  
  @keyframes enlarge {
    0% {transform: scale(1);}
    33.33% {transform: scale(1.3);}
    66.66% {transform: scale(1);}
    100% {transform: scale(1);}
  }
  



</style>
